<template>
  <div class="graph-table-list-wrap">
    <div :class="['graph-table-wrap', isPaginationShow ? 'half' : 'full']">
      <common-table :data="tableData" :field="tableField" height="100%" @cell-click="cellClick">
        <!--        <el-table-column
                  v-for="field in tableField"
                  :key="field.key"
                  :prop="field.fieldName"
                  :label="field.fieldDescribe">
                </el-table-column>-->
      </common-table>
    </div>
    <div class="graph-pagination-wrap" v-show="isPaginationShow">
      <pagination :total="tableTotal" :page.sync="pagination.pageNum" :limit.sync="pagination.pageSize"
        @pagination="paginationChange" />
    </div>
  </div>
</template>

<script>
import { handleTableData } from '../../utils'
export default {
  name: 'ListTable',
  props: {
    option: {
      type: Object,
      default: () => ({
        tableField: [
          /*
            {
              key: '',
              fieldName: '',
              fieldDescribe: ''
            }
          */
        ],
        tableData: [],
        tableTotal: 0,
        config: {
          pagination: {
            show: false
          },
          border: false
        }
      })
    },
    config: {
      type: Object,
      default: () => ({
        isPaginationDisabled: false
      })
    }
  },
  data() {
    return {
      defaultConfig: {
        pagination: {
          show: true
        }
      },
      defaultStyle: {},
      pagination: {
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  computed: {
    tableField: function () {
      let tableField = this.option?.tableField || []
      if (tableField && tableField instanceof Array) {
        return tableField.reduce((r, c) => {
          r.push({
            key: c.key,
            prop: c.fieldName,
            label: c.fieldDescribe,
            showOverflowTooltip: true,
          })
          return r

        }, [])
      } else {
        return []
      }
    },
    tableData: function () {
      let tableData = this.option?.tableData || []
      if (tableData && tableData instanceof Array) {
        // 对象的值类型为引用类型时无法展示，需要转换
        return handleTableData(tableData)
      } else {
        return []
      }
    },
    tableTotal: function () {
      return this.option?.tableTotal || 0
    },
    paginationConfig: function () {
      return this.option?.config?.pagination || this.defaultConfig.pagination
    },
    isPaginationShow: function () {
      return this.paginationConfig.show && !this.config.isPaginationDisabled && this.tableTotal > 0
    }
  },
  methods: {
    getFieldName(desc) {
      let field = this.tableField.find(f => f.label === desc)
      return field?.prop || desc
    },
    resetPagination() {
      this.pagination.pageNum = 1
      this.pagination.pageSize = 10
    },
    getVariable(isReset = true) {
      let variable = []

      if (isReset) this.resetPagination()

      if (this.paginationConfig.show) {
        Object.keys(this.pagination).forEach(key => {
          variable.push({
            name: key,
            type: 'number',
            defaultValue: this.pagination[key]
          })
        })
      }
      return variable
    },
    paginationChange() {
      let variable = this.getVariable(false)
      this.$emit('variableChange', variable)
    },
    cellClick({ row, column, cell, event }) {
      let name = this.getFieldName(column.label)
      const data = {
        label: column.label,
        name: name,
        value: row[name]
      }

      console.log('表格点击事件: ', data)
      this.$emit('chartClick', data)
    }
  }
}
</script>

<style scoped lang="scss">
.graph-table-list-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 8px;
  box-sizing: border-box;

  .graph-table-wrap {}

  .full {
    height: 100%;
  }

  .half {
    height: calc(100% - 46px);
  }

  .graph-pagination-wrap {
    height: 28px;
  }

  ::v-deep .el-table {
    margin-top: 0;
  }
}
</style>
